<template>
  <div>
    <div class="verify">
      <van-form>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
        />
        <van-field
          v-model="verify"
          name="verify"
          label="验证码"
          placeholder="验证码"
        >
          <template #button>
            <van-button type="default" @click="gitsms" :disabled="flag">{{
              name
            }}</van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="onSubmit"
            >提交</van-button
          >
        </div>
      </van-form>
      <a @click="register">没有账号？点击注册</a>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import Cookies from "js-cookie";
export default {
  props: {},
  data() {
    return {
      phone: "",
      verify: "",
      zz: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
      name: "获取验证码",
      flag: false, //按钮禁用
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onSubmit() {
      // 提交
      if (this.zz.test(this.phone)) {
        this.$api.smslogin({ phone: this.phone }).then((res) => {
          localStorage.setItem("userinfo", JSON.stringify(res.data.list));
          this.$router.push("/");
          Notify({ type: "success", message: "登陆成功" });
        });
      } else {
        Notify({ type: "warning", message: "请输入正确的手机号" });
      }
    },
    register() {
      // 去注册
      this.$router.push("/register");
    },
    gitsms() {
      // 获取验证码
      console.log(this.phone);
      if (this.zz.test(this.phone)) {
        this.$api.sms({ phone: this.phone }).then((res) => {
          let expires = new Date(Date.now() + 10000);
          Cookies.set("verify", res.data.list.code, { expires: 10000 });
          let countTime = Date.parse(expires);
          let times = new Date().getTime();
          let num = 10;
          let timer = setInterval(() => {
            // console.log(times);
            // console.log(countTime);
            // console.log(Math.ceil((countTime-times)/1000) );

            this.name = num-- + "s后再次获取";
            this.flag = true;
            // Cookies.get('verify')
            countTime = countTime - 1000;
            console.log((countTime - times) / 1000);
            if (parseInt((countTime - times) / 1000) == 0) {
              clearInterval(timer);
              this.name = "获取验证码";
              this.flag = false;
            }
          }, 1000);
        });
      } else {
        Notify({ type: "warning", message: "请输入正确的手机号" });
      }
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.verify {
  margin: 50% auto;
}
a {
  font-size: 30px;
  color: #39f;
}
</style>
